<template>
  <el-row>
    <el-col :span="24">
      <el-form-item :label="`课文第${numText(num)}段段落名称`">
        <el-input
          v-model="formData[num - 1].paragraphName"
          placeholder="请输入段落名称"
          clearable
        />
      </el-form-item>
      <el-form-item
        :label="`课文第${numText(num)}段朗读富文本`"
        prop="content"
        :rules="{
          required: true,
          message: `请输入第${numText(num)}段朗读文本`,
          trigger: 'blur',
        }"
      >
        <VueUeditorWrap
          ref="editor"
          v-model="formData[num - 1].paragraph"
          :config="editorConfig"
          :destroy="true"
        />
      </el-form-item>
    </el-col>
    <el-col :span="24">
      <el-form-item
        :label="`课文第${numText(num)}段朗读纯文本`"
        :rules="{
          required: true,
          message: `请输入分第${numText(num)}段朗读文本`,
          trigger: 'blur',
        }"
      >
        <el-input
          rows="15"
          v-model="formData[num - 1].contentText"
          :placeholder="`请输入第${numText(num)}段朗读文本`"
          type="textarea"
        />
      </el-form-item>
    </el-col>
    <el-col :span="24" style="margin: 0; padding: 0">
      <el-form-item
        :label="`课文分段朗读第${numText(num)}段音频`"
        prop="fileUrl"
        class="audioLabel"
        :rules="{
          required: true,
          message: `请选择第${numText(num)}段音频文件`,
          trigger: 'blur',
        }"
      >
        <el-input
          style="width: 500px"
          :value="filename"
          placeholder="请选择文件"
          readonly
        />
        <!-- {{ numText(num) }} -->
        <!--引用这个vue框架自带的上传组件-->
        <FileUpload
          style="display: inline-block; margin-left: 20px"
          :fileType="fileType"
          :fileSize="fileSize"
          :isShowTip="false"
          @input="uploadSuccess"
        >
        </FileUpload>
        <audio
          :src="formData[num - 1].ftextIle"
          ref="player"
          @loadedmetadata="loadedmetadata"
        ></audio>
        <el-button
          type="danger"
          style="margin-left: 20px"
          size="mini"
          @click="delSection(num)"
          >删除本段</el-button
        >
      </el-form-item>
    </el-col>
  </el-row>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
const textArr = [
  { num: 0, text: "零" },
  { num: 1, text: "一" },
  { num: 2, text: "二" },
  { num: 3, text: "三" },
  { num: 4, text: "四" },
  { num: 5, text: "五" },
  { num: 6, text: "六" },
  { num: 7, text: "七" },
  { num: 8, text: "八" },
  { num: 9, text: "九" },
];
const digitArr = ["", "十", "百", "千", "万"];
export default {
  name: "AddParagraph",
  components: { VueUeditorWrap },
  props: {
    num: {
      type: Number,
      default: 1,
    },
    editorConfig: {
      type: Object,
      default: () => {
        return {
          toolbars: [
            [
              "fullscreen",
              "source",
              "|",
              "undo",
              "redo",
              "|",
              "bold",
              "italic",
              "underline",
              "fontborder",
              "strikethrough",
              "superscript",
              "subscript",
              "removeformat",
              "formatmatch",
              "autotypeset",
              "blockquote",
              "pasteplain",
              "|",
              "forecolor",
              "backcolor",
              "insertorderedlist",
              "insertunorderedlist",
              "selectall",
              "cleardoc",
              "|",
              "rowspacingtop",
              "rowspacingbottom",
              "lineheight",
              "|",
              "customstyle",
              "paragraph",
              "fontfamily",
              "fontsize",
              "|",
              "directionalityltr",
              "directionalityrtl",
              "indent",
              "|",
              "justifyleft",
              "justifycenter",
              "justifyright",
              "justifyjustify",
              "|",
              "touppercase",
              "tolowercase",
              "|",
              "link",
              "unlink",
              "anchor",
              "|",
              "imagenone",
              "imageleft",
              "imageright",
              "imagecenter",
              "|",
              // 'simpleupload',
              "insertimage",
              "emotion",
              "scrawl",
              "insertvideo",
              "music",
              "attachment",
              "map",
              "gmap",
              "insertframe",
              "insertcode",
              "webapp",
              "pagebreak",
              "template",
              "background",
              "|",
              "horizontal",
              "date",
              "time",
              "spechars",
              "snapscreen",
              "wordimage",
              "|",
              "inserttable",
              "deletetable",
              "insertparagraphbeforetable",
              "insertrow",
              "deleterow",
              "insertcol",
              "deletecol",
              "mergecells",
              "mergeright",
              "mergedown",
              "splittocells",
              "splittorows",
              "splittocols",
              "charts",
              "|",
              "print",
              "preview",
              "searchreplace",
              "drafts",
              "help",
            ],
          ],
          autoHeightEnabled: false, // 自动变高
          autoFloatEnabled: false,
          initialContent: "<p><span>请输入内容</span></p>", // 可回显编辑的内容
          // autoClearinitialContent: true,
          initialFrameWidth: "100%", // 初始化宽
          initialFrameHeight: 400, // 初始化高
          // BaseUrl: "",
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口） - 修改成自己后端地址
          serverUrl:
            "https://service.rohde-schwarz.com.cn/admin/system/upload/ueditor",
          // serverUrl: 'http://test1.waipai.ren:9058/admin/system/upload/ueditor',
          // UEditor 资源文件的存放路径
          UEDITOR_HOME_URL: "/static/UEditor/", // 重要重要重要重要重要重要重要重要重要 必须配置好路径!!!
        };
      },
    },
    formData: {
      type: Array,
      // default: () => {
      //     return {
      //         content: "", // 段落富文本字段
      //         contentText: "", // 段落纯文本字段
      //         fileUrl: "", // 上传的文件路径 , 隔开
      //         fileName: "" // 上传文件的名字
      //     };
      // }
    },
  },
  data: function () {
    return {
      fileType: ["mp3", "aac", "wma", "wav"],
      fileSize: 100,
      filename: "",
    };
  },
  computed: {},
  watch: {
    // formData: {
    //     handler(val) {
    //         console.log(val);
    //     },
    //     deep: true,
    //     immediate: true
    // }
  },
  methods: {
    //文件上传成功回调
    uploadSuccess(res) {
      this.filename = res;
      this.formData[this.num - 1].ftextIle = res;
    },

    //获取时长
    loadedmetadata() {
      const duration = parseInt(this.$refs.player.duration); // 秒数
      this.formData[this.num - 1].duration = duration.toFixed(2);
      //this.formData[this.num - 1].duration = this.secondToTimeStr(duration);
    },
    secondToTimeStr(t) {
      if (!t) return "00:00";
      if (t < 60) return "00:" + ((i = t) < 10 ? "0" + i : i);
      if (t < 3600)
        return (
          "" +
          ((a = parseInt(t / 60)) < 10 ? "0" + a : a) +
          ":" +
          ((i = t % 60) < 10 ? "0" + i : i)
        );
      if (3600 <= t) {
        var a,
          i,
          e = parseInt(t / 3600);
        return (
          (e < 10 ? "0" + e : e) +
          ":" +
          ((a = parseInt((t % 3600) / 60)) < 10 ? "0" + a : a) +
          ":" +
          ((i = t % 60) < 10 ? "0" + i : i)
        );
      }
    },
    // 数字转汉字
    numText(val) {
      // 大于九万九千九百九十九的时候就数字吧，太费劲了，就不算了
      if (val > 99999) return val;
      let numArr = Number(val).toString().split("");
      const numTexts = numArr.map((num) => {
        return textArr.find((val) => num == val.num).text;
      });
      let numCn = "";
      // 在位数后面加上单位最大数字为
      numTexts.forEach((text, i, arr) => {
        let key = numTexts.length - i - 1;
        if (text != "零") {
          numCn += text + digitArr[key];
        } else {
          numCn += text;
        }
      });
      // 替换错误的单位
      while (numCn.indexOf("零零") != -1) {
        numCn = numCn.replace("零零", "零");
      }
      numCn =
        numCn[numCn.length - 1] == "零"
          ? numCn.substring(0, numCn.length - 1)
          : numCn;
      return numCn;
    },
    // 删除本段
    delSection(num) {
      this.$confirm(`是否删除第${this.numText(num)}段文本?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$emit("delSection", num);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    console.log(this.secondToTimeStr(59));
  },
};
</script> 

<style scoped></style>